<template>

    <div class="backgroundCard">

        <div class="webTitleAni" 
             :class="{'slide-from-top':isLoad===true,'can_not_focus':registerIf===true}"   >
                <template v-for="character , index in webNameArrayUpper" :key="index">
                    <div :class=webNameClass[index] :style="{animation:`${bgTextAni} 6s ease infinite`,animationDelay:index*0.06+'s'}">{{ character }}</div>
                </template>
        </div>

        <div class="confirmButton" 
            @click="startLogin(400)"  
            :style="{animation:`${confirmButtonFadeAni} 1s ease,confirmButtonShine 3s ease infinite`}"
            :class="{'button-active':confirmButtonDisplay ==='auto','button-disabled': confirmButtonDisplay==='none','can_not_focus':registerIf===true}">
                <div class="buttonIcon"></div>
                <div class="fakeText">Login</div>
        </div>

        <div class="mainBoard" 
        :style="{top:`${mainTableStyleTop}%`,opacity:`${mainTableStyleOpacity}%`}"
        :class="{'can_not_focus':registerIf===true}"
        >
        <div class="pageHead">
            
            <el-card class="pageHeadCard" style="height: 600px;min-width: 360px; max-width: 480px;">
                <el-row :gutter="15">
                    <el-col :span="24"><img class="Logo" src="/systemImage/Immortality.png" alt="Logo"></el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :span="8"><label class="creed fakeText">Ask</label></el-col>
                    <el-col :span="8"><label class="creed fakeText">Answer</label></el-col>
                    <el-col :span="8"><label class="creed fakeText">Apply</label></el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="24"></el-col>
                </el-row>
                
                <div class="co_name">
                    <span class="co fakeText">Immortality System (IMM)</span>
                </div>
                       
            </el-card>
        </div>

        <div class="loginCard">
            <el-card style="height: 600px; min-width: 480px;">
                <template #header>
                <div class="card-header" >
                    <span class="loginTitle fakeText">Welcome to NoQuestion</span>
                </div>
                </template>

                <div class="content">
                    <el-form
                        ref="ruleForm"
                        :model="userLoginForm"
                        :rules="userLoginFormRules"
                    >
                        <el-row :gutter="10" class="tipBlock"> 
                            <el-col :span="4"></el-col>
                            <el-col :span="16"><label class="tips fakeText">登录或注册一个 NoQuestion 账号</label></el-col>
                            <el-col :span="4"></el-col>
                        </el-row>
                        <el-row :gutter="10"> 
                            <el-col :span="4"> </el-col>
                            <el-col :span="4"><label class="form-label fakeText">用户名</label></el-col>
                            <el-col :span="12">
                                <el-form-item  prop="username">
                                        <el-input v-model="userLoginForm.username" style="width: 100%;" placeholder='请输入用户名' />
                                </el-form-item>
                            </el-col>
                            <el-col :span="4"> </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="4"> </el-col>
                            <el-col :span="4"><label class="form-label fakeText">密码</label></el-col>
                            <el-col :span="12">
                                <el-form-item prop="pass">
                                        <el-input v-model="userLoginForm.pass" type="password" style="width: 100%;" placeholder='请输入密码' />
                                </el-form-item>
                            </el-col>
                            <el-col :span="4"> </el-col>
                        </el-row>
                        <el-row :gutter="10" class="loginButton">
                            <el-col :span="4"> </el-col>
                            <el-col :span="16"><el-button type="primary" @click="debouceLogin" style="width: 100%; height: 40px; font-size: 20px; font-weight: 700;">登录</el-button></el-col>
                            <el-col :span="4"> </el-col>
                        </el-row>
                        
                        <el-row :gutter="10" class="loginButton">
                            <el-col :span="4"> </el-col>
                            <el-col :span="16"><el-button type="primary" @click="startRegister" style="width: 100%; height: 40px; font-size: 20px; font-weight: 700;">注册</el-button></el-col>
                            <el-col :span="4"> </el-col>
                        </el-row>
                    </el-form>
                    
                </div>
                
                <template #footer>
                    <div class="card-footer">
                        <span class="fakeText">Welcome to NoQuestion</span>
                    </div>
                    
                    
                </template>
            </el-card>
        </div>
        
        

        </div>

        
            <div class="registerBoard" v-show="registerIf">
                <div class="title"><h1>注册您的 NoQuestion 账号</h1></div>
                    <el-form
                        ref="ruleFormRegister"
                        :model="userRegisterForm"
                        :rules="userRegisterFormRules"
                        label-width="auto"
                    >
                        <div class="register">
                            <el-form-item label="用户名" prop="username">  
                                <el-input v-model="userRegisterForm.username"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="pass">
                                <el-input v-model="userRegisterForm.pass"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="userRegisterForm.email"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <uploadAvatar/>
                            </el-form-item>
                        </div>

                        <div class="option">
                                <button type="button" @click="register()"></button>
                        </div>

                    </el-form>
                    
            </div>
        

    </div>

    
    
</template>

<script setup lang="ts">
import { onMounted, ref, resolveComponent } from 'vue';
import axios from 'axios'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { loadingStatsStore } from '../stores/statsManageStore'
import { debounce } from '../utils/debouce';
import request from '../utils/request';
import { useUserStore } from '../stores/userStore';
import uploadAvatar from '../components/imm-avatarUpload.vue'

const userStore=useUserStore();

const loadAni = loadingStatsStore();

const isLoad=ref(false);
const registerIf=ref(false);

const webName=ref<string>('NoQuestion');
const webNameArray=ref([...webName.value]);
const webNameArrayUpper=ref(webNameArray.value.map(item=>(item.toUpperCase())))
const webNameClass=ref<string[]>([]);
for(let i=0;i<webNameArrayUpper.value.length;i++){
    webNameClass.value.push('titleChar '+'char'+i.toString());
}
const bgTextAni=ref('TraverseText');

const mainTableStyleTop=ref(-30);
const mainTableStyleOpacity=ref(0);

const confirmButtonDisplay=ref('auto')
const confirmButtonFadeAni=ref('')


const ruleForm=ref()
const ruleFormRegister=ref();
const inputFormData=ref();


const userLoginForm =ref({
    username:'',
    pass:'',
})

const userRegisterForm=ref({
    username:'',
    pass:'',
    email:'',
})

const userRegisterFormRules=ref({
    username:[
        {required:true,message:"用户名不能为空",trigger:'change'},
        {min:4,message:`用户名过短`,trigger:'change'},
        {max:16,message:'用户名过长',trigger:'change'},
    ],
    pass:[
        {required:true,message:'密码不能为空',trigger:'change'},
        {min:6,message:'密码过短',trigger:'change'},
        {pattern:/^\d{6,}[a-zA-Z]{2,}$/, message: '密码应不少于6个数字且以不少于2个字母结尾,', trigger: 'change'},
    ],
    email:[
        {required:true,message:"必须填写一个邮箱",trigger:'change'},
        {pattern:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,message:'邮箱格式不正确',trigger:'change'},
    ],

})

const userLoginFormRules=ref({
    username:[
        {required:true,message:"用户名不能为空",trigger:'change'},
        {min:4,message:`用户名过短`,trigger:'change'},
        {max:16,message:'用户名过长',trigger:'change'}
    ],
    pass:[
        {required:true,message:'密码不能为空',trigger:'change'},
        {min:6,message:'密码过短',trigger:'change'},
        {pattern:/^\d{6,}[a-zA-Z]{2,}$/, message: '密码应不少于6个数字且以不少于2个字母结尾,', trigger: 'change'}
    ]
})

const router = useRouter();

const login = async () =>{

    try{
        await ruleForm.value.validate();
        const reqLoginData={
            username:userLoginForm.value.username,
            pass:userLoginForm.value.pass
        }

        const response=await request.post('/api/users/login',reqLoginData);
        userStore.currentUser=response.data.user;
        

        if(response.code===200){
            
            userStore.setToken(response.data.token);
            ElMessage.success(`欢迎您,`+userStore.currentUser?.username);
            router.push({name:'questionSim'})
        }

    }
    catch(error:any){
        loadAni.setLoadingText('加载失败');
        console.log("错误",error);
            await new Promise<void>((resolve)=>{
                setTimeout(()=>{
                    resolve();
                },500)
            })
            loadAni.completeLoad();
        ElMessage.warning(error || '未知的网络错误!')

    }

}

const debouceLogin = debounce(login,500);

const startLogin = (delay:number)=>{
    confirmButtonDisplay.value='none'
    confirmButtonFadeAni.value='confirmButtonFade'
    setTimeout(()=>{
        mainTableStyleTop.value=50;
        mainTableStyleOpacity.value=100;
        
    },delay)
}

const startRegister = function(){

        registerIf.value=true

}

const uploadChange = async function(){
    
    
}

const register= async function(){

    try{
        await ruleFormRegister.value.validate();
        const registerFormData=new FormData();
        registerFormData.append('username',userRegisterForm.value.username);
        registerFormData.append('pass',userRegisterForm.value.pass);
        registerFormData.append('email',userRegisterForm.value.email);
        if(inputFormData.value.files[0]){
            registerFormData.append('avatar',inputFormData.value.files[0]);
        }
        const response = await request.post('/api/users/register',registerFormData);
    
    }catch (error:any) {

        ElMessage.warning('网络错误')
    }
}

onMounted(()=>{
        
        setTimeout(()=>{
            isLoad.value=true;
        },500)
    })


</script>

<!-- 全局动画 -->
<style>
        @keyframes TraverseText{
            0%{
                color:rgba(255, 255, 255,0);
                
            }

            5%{
                color: rgba(255, 255, 255,0);
                 
            }

            6%{
                color: rgba(255, 255, 255,100);
                
            }

            12%{
                color:rgba(255, 255, 255,0);
                
            }

            70%{
                text-shadow: 10px -120px 0px rgb(255, 255, 255,0);
            }

            71%{

                text-shadow: 10px -120px 2px rgb(255, 255, 255,1);

            }
            

            75%{
                text-shadow: 10px -120px 0px rgb(255, 255, 255,0);
            }
        }

        @keyframes iconTurn{
            0%{
                transform: rotate(45deg);
            }

            20%{
                transform: rotate(45deg);
            }

            25%{
                transform: rotate(135deg);
            }


            45%{
                transform: rotate(135deg);
            }

            50%{
                transform: rotate(225deg);
            }

            70%{
                transform: rotate(225deg);
            }

            75%{
                transform: rotate(315deg);
            }

            95%{
                transform: rotate(315deg);
            }

            100%{
                transform: rotate(405deg);
            }
        }

        @keyframes confirmButtonFade{
            100%{
                opacity: 0%;
            }
        }

        @keyframes confirmButtonShine{
            0%{

            }

            50%{
                
            }
        }


</style>

<style scoped>

/*入场动画*/
.webTitleAni.slide-from-top{
    opacity: 100%;
    transform: translate(-50%,-50%);
}


/*----*/

.no-copy {
  /* 禁止文本选择（兼容各浏览器） */
  -webkit-user-select: none; /* Safari、Chrome 等 */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE、Edge */
  user-select: none; /* 标准语法 */
  
}

.can_not_focus{
    pointer-events: none;
    user-select: none;
    opacity: 50%!important;
}



.fakeText{
    pointer-events: none;
}

.button-active{
    pointer-events: auto;
}

.button-disabled{
    pointer-events: none;
}

.backgroundCard{

    background-color: rgb(0, 0, 0);
    width: 100%;
    min-height: 100%;
    position: relative;
}

.webTitleAni{
    position: fixed;
    z-index: 0;
    display: flex;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-75%);  
    pointer-events: none;
    transition: all 0.7s ease;
    opacity: 0%;
}

.confirmButton{
    
    position: fixed;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 75%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 15px;
    color: rgb(255, 245, 245,80%);
    font-size: 32px;
    font-family: fantasy;
    gap: 30px;
    text-shadow: 0px 0px 12px rgb(0, 229, 255);
    cursor: pointer;
    transition: all 0.75s ease;
    border: 0px  solid  rgb(0, 255, 247,0);
    border-radius: 10px;
    
}

.confirmButton:hover{
    color: rgb(0, 238, 255);
    border: 1px  solid  rgb(0, 255, 247,100);
    box-shadow: 0px 0px 24px rgb(255, 255, 255);
}

.buttonIcon{
    border: 6px solid rgb(255, 255, 255);
    width: 40px;
    height: 40px;
    transform: rotate(45deg);
    box-shadow: 0px 0px 12px rgb(77, 228, 255);
    animation: iconTurn 8s ease infinite;
}

.titleChar{
    font-size: 1200%;
    margin: 25px;
    font-family: fantasy;
    color: rgba(255, 255, 255, 0);
    -webkit-text-stroke: 8px rgba(255, 255, 255,100);
    text-shadow: 10px -120px 0px rgb(255, 255, 255,0);
}


.mainBoard{
    display: flex;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
    transition: all ease 0.7s;
}



.el-row{
    margin-bottom: 20px;
}

.el-col{
    display: flex !important; 
    justify-content: center !important; 
}

.pageHeadCard{
    background-color: rgb(8, 29, 55);
    position: relative;
}

.Logo{
    width: 50%;
    height: auto;
}

.card-header{
    display: flex;
    
    justify-content: center;
}

.co_name{
   text-align: center;
   position: relative;
   
}

.co{

    font-size: 18px;
    color:rgb(255, 236, 236);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.creed{
    font-size: 36px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: rgb(255, 236, 236);
    text-shadow: 0 0 10px rgba(52, 152, 219, 0.8), 
                   0 0 20px rgba(52, 152, 219, 0.6), 
                   0 0 30px rgba(52, 152, 219, 0.4);
}

.form-label{
    font-size: 14px;
}

.loginTitle{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 36px;
    text-shadow: 3px 1px 2px rgb(65, 62, 62);
    font-weight: 700;
    color: rgb(99, 165, 171);
    
}

.tips{
    font-size: 16px;
    color: rgba(0, 0, 0, 0.429);
}

.tipBlock{
    margin-bottom: 40px;
}

.loginButton{
    margin-top: 60px;
}

.card-footer{
    display: flex;
    justify-content: center;
}

.registerBoard{
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    border-radius: 10px;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 11;
    width: 30%;
    height: 80%;
    background-color: rgb(231, 231, 231);
}

    .registerBoard .title{
        width: 100%;
        background-color: rgba(0, 0, 0, 0.12);
        border-radius: 15px;
        text-align: center;
        color: rgb(60, 134, 134);
        text-shadow: 2px 2px 3px rgb(0, 0, 0);
    }

</style>